<template>
	<view class="mypage">
		<view class="personage" v-if="islogin==true">
			<view class="headportrait
">
			<view class="photo">
				<image :src="userimg" mode=""></image>
			</view>
			<view class="usermessage">
				<view class="username">
					{{username}}
				</view>
				<view class="user_sign">
					{{usersign}}
				</view>
				<!-- <view class="user_createtime">
					已经来了{{readdays}}天啦
				</view> -->
			</view>
			</view>
			<view class="checkin" v-if="ischeckin==false">
				<span @click="checkin" class="signedin">签到</span>
			</view>
			<view class="checkin" v-if="ischeckin">
				<span class="notcheckin">已签到</span>
			</view>
		</view>
		<view class="personage" v-if="islogin==false">
					<view class="headportrait
		" @click="switchLogin">
					<view class="photo nologin">
						<image src="../../static/mine.png" mode=""></image>
					</view>
					<view class="usermessage">
						<view class="username">
							登录/注册
						</view>
						<view class="user_sign nologin">
							登录体验更多内容
						</view>
					</view>
					</view>
					<view class="compile">
					</view>
				</view>
		<view class="module">
			<view class="module-left">
				<view class="module-img" @click="readHistory">
					<image src="../../static/record.png" mode=""></image>
				</view>
				<view class="module-text" @click="readHistory">
					阅读记录
				</view>
			</view>
			<view class="module-right">
					<view class="module-right-text">
						{{checkindays}}
					</view>
					<view class="module-text">
						签到天数
					</view>
			</view>
		</view>
		<view class="other">
			<view class="other-item"  @click="switchBookrack">
				<view class="other-left">
					<view class="other-left-img">
						<image src="../../static/mybook.png" mode=""></image>
					</view>
					<view class="other-left-title">
						我的书架
					</view>
				</view>
				<view class="other-right">
					<u-icon name="arrow-right" color="#ccc"></u-icon>
				</view>
			</view>
			<view class="other-item"  @click="switchPerson">
				<view class="other-left">
					<view class="other-left-img">
						<image src="../../static/person.png" mode=""></image>
					</view>
					<view class="other-left-title">
						个人资料
					</view>
				</view>
				<view class="other-right">
					<u-icon name="arrow-right" color="#ccc"></u-icon>
				</view>
			</view>
			<view class="other-item" @click="disclaimer">
				<view class="other-left">
					<view class="other-left-img">
						<image src="../../static/mianze.png" mode=""></image>
					</view>
					<view class="other-left-title">
						免责声明
					</view>
				</view>
				<view class="other-right">
					<u-icon name="arrow-right" color="#ccc"></u-icon>
				</view>
			</view>
			<view class="other-item" @click="quitLogin" v-if="islogin">
				<view class="other-left">
					<view class="other-left-img">
						<image src="../../static/quit.png" mode=""></image>
					</view>
					<view class="other-left-title">
						退出登录
					</view>
				</view>
				<view class="other-right">
					<u-icon name="arrow-right" color="#ccc"></u-icon>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				islogin:false,
				ischeckin:false,
				username:"",
				userimg:"",
				usercreatetime:"",
				// readdays:"",
				checkindays:"",
				usersign:""
			}
		},
		
		onShow() {
			let key=uni.getStorageSync("key")
			if(key.length!=0){
				this.islogin=true
				uniCloud.callFunction({
					name:"mypage",
					data:{
						user_id:key
					},
					success:res=>{
						// console.log(res.result.data[0]);
						let data=res.result.data[0]
						console.log(data,11);
						this.usersign=data.user_sign
						this.username=data.username
						this.userimg=data.user_img
						this.usercreatetime=data.user_create_time
						// let date=new Date(this.usercreatetime)
						// let datatime=new Date(new Date(date).toLocaleDateString()).getTime()
						// console.log(datatime);						
						// let now =new Date(new Date().toLocaleDateString()).getTime()
						// this.readdays=Math.floor((now-0-datatime)/86400000)+1
						
						
					}
				})
				//判断是否签到
				uniCloud.callFunction({
					name:"where_user_checkin",
					data:{
						user_id:key
					},
					success:res=>{
						console.log(res);
						//没有签到过
						if(res.result.data.length==0){
							this.ischeckin=false
						}else{
							//签到过了
							// let date=new Date(this.usercreatetime)
							// console.log(new Date(new Date(date).toLocaleDateString()).getTime());
							let result=res.result.data
							//上一次签到的时间
							let pretime=result[result.length-1].checkin_time
							//获取当前的时间
							let now =new Date(new Date().toLocaleDateString()).getTime()
							// 86400000
							if(now-pretime>=86400000){
								// console.log(pretime,now,"还没签到");
								this.ischeckin=false
								
							}else{
								this.ischeckin=true
								// console.log("签到了");
							}
						}
					}
				})
			uniCloud.callFunction({
				name:"where_user_checkin",
				data:{
					user_id:key
				},
				success:res=>{
					this.checkindays=res.result.data.length
				}
			})
			}else{
				this.checkindays=0
			}
		},
		methods: {
			switchPerson(){
				let key=uni.getStorageSync("key")
				if(key.length!=0){
					uni.navigateTo({
						url:"../personmaterial/personmaterial"
					})
				}
			},
			disclaimer(){
				uni.showModal({
					title: '免责声明',
						content: '对于因不可抗力或因黑客攻击、通讯线路中断等不能控制的原因造成的网络服务中断或其他缺陷，导致用户不能正常使用APP，本APP不承担任何责任，但将尽力减少因此给用户造成的损失或影响',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
				})
			},
			switchBookrack(){
				uni.switchTab({
					url:"../bookrack/bookrack"
				})
			},
			quitLogin(){
				let key=uni.getStorageSync("key")
				let that=this
				if(key.length!=0){
					uni.showModal({
						title: '退出登录',
							content: '是否退出',
							success: function (res) {
								if (res.confirm) {
									uni.removeStorageSync("key"),
									that.islogin=false,
									that.checkindays=0
									uni.showToast({
										title:"退出登录",
										icon:"success"
									})
								} else if (res.cancel) {
									
								}
							}
					})
					
				}
			},
			checkin(){
				let key=uni.getStorageSync("key")
				if(key.length!=0){
					uniCloud.callFunction({
						name:"where_user_checkin",
						data:{
							user_id:key
						},
						success:res=>{
							console.log(res);
							//没有签到过
							if(res.result.data.length==0){
								let now =new Date(new Date().toLocaleDateString()).getTime()
								uniCloud.callFunction({
									name:"user_add_checkin",
									data:{
										user_id:key,
										checkin_time:now
									},
									success:res=>{
										console.log(res);
										uniCloud.callFunction({
											name:"where_user_checkin",
											data:{
												user_id:key
											},
											success:res=>{
												this.checkindays=res.result.data.length
											}
										})
										this.ischeckin=true
									}
									
								})
							}else{
								//签到过了
								let result=res.result.data
								//上一次签到的时间
								let pretime=result[result.length-1].checkin_time
								//获取当前的时间
								let now =new Date(new Date().toLocaleDateString()).getTime()
								// 86400000
								if(now-pretime>=86400000){
									console.log(pretime,now,"还没签到");
									uniCloud.callFunction({
										name:"user_add_checkin",
										data:{
											user_id:key,
											checkin_time:now
										},
										success:res=>{
											console.log(res);
											this.ischeckin=true
										}
									})
									uniCloud.callFunction({
										name:"where_user_checkin",
										data:{
											user_id:key
										},
										success:res=>{
											this.checkindays=res.result.data.length
										}
									})
								}else{
									this.ischeckin=true
									console.log("签到了");
								}

							}
						}
					})
				}
			},
			switchLogin(){
				uni.navigateTo({
					url:`../login/login`
				})
			},
			readHistory(){
				let key=uni.getStorageSync("key")
				if(key.length!=0){
					uni.navigateTo({
						url:`../myread/myread`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
.mypage{
	.personage{
		display: flex;
		height: 100px;
		box-sizing: border-box;
		padding: 0 10px;
		// background-color: #f9834a;
		.headportrait{
			width: 560rpx;
			display: flex;
			.photo{
				
				width: 100px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					border-radius: 50%;
					background-color: #fff;
					width: 80%;
					height: 80%;
				}
				&.nologin{
					image{
						border: 1px solid #f4f4f4;
					}
				}
			}
			.usermessage{
				flex: 1;
				font-size: 18px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.username{
					width: 100%;
					display: flex;
					justify-content: left;
				}
				.user_sign{
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					justify-content: left;
					font-size: 26rpx;
					color: #a1a1a1;
					box-sizing: border-box;
					padding-right: 30rpx;
					// width: 320rpx;
					height: 68rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					&.nologin{
						display: flex;
						align-items: center;
					}
				}
				.user_createtime{
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					justify-content: left;
					font-size: 26rpx;
					color: #a1a1a1;
				}
			}
		}
		.checkin{
			flex: 1;
			display: flex;
			align-items: center;
			span{
				padding: 10rpx 20rpx ;
				border-radius: 24rpx;
				&.signedin{
					background-color: #ccc;
					color: #6f6f6f;
				}
				&.notcheckin{
					background-color: #f9834a;
					color: white;
				}
			}
		}
	}
	.module{
		display: flex;
		margin-top: 10px;
		overflow: hidden;
		box-sizing: border-box;
		width: 95%;
		margin: 5px auto;
		height: 80px;
		box-shadow:0px 4px 5px -6px #f9834a;
		border-radius: 12px;
		.module-img{
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 3px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.module-right-text{
			width: 50rpx;
			height: 50rpx;
			font-size: 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.module-text{
			font-size: 13px;
		}
		.module-left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;
			background-color: #f7f7f7;
		}
		.module-right{
			flex-direction: column;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f7f7f7;
		}
	}
	.other{
		margin-top: 80rpx;
		box-sizing: border-box;
		padding: 0 13px;
		// color: #ccc;
		.other-item{
			margin-top: 26rpx;
			display: flex;
			font-size: 32rpx;
			padding-bottom: 26rpx;
			border-bottom: 1px solid #ededed;
			.other-left{
				box-sizing: border-box;
				padding-left: 5px;
				width: 60%;
				display: flex;
				align-items: center;
				.other-left-img{
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.other-left-title{}
			}
			.other-right{
				box-sizing: border-box;
				padding-right: 5px;
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
}
</style>
